<template>
  <view class="home-cards">
    <view class="">
      <u-popup :show="show" mode="left" @close="close" @open="open">
        <view>
			<p class="popup-title">更多</p>
			<view class="popup-history">
				<u-icon name="attach" color="#2979ff" size="28"></u-icon>
				<text @click="onHistory">浏览纪录</text>
			</view>
        </view>
      </u-popup>
      <image class="home-image-list" @click="show = true" src="/static/list.png" mode=""></image>
    </view>
    <image class="home-image-share" @click="goShare" src="/static/share.png" mode=""></image>
    <image class="home-image-set" @click="goSet" src="/static/set.png" mode=""></image>
    <view class="home-info">{{ info?.data?.nickName }}</view>
    <image class="home-avatar" :src="info.data?.avatarUrl" mode=""></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
      required: true,
    },
  },
  methods: {
    goSet() {
      uni.navigateTo({
        url: '/pages/set/set',
      });
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
	onHistory(){
		uni.navigateTo({
			url:'/pages/browsehistory/browsehistory'
		})
	}
  },
};
</script>

<style lang="scss">
.home-cards {
	background: url('');
	
  width: 100%;
  height: 400rpx;
  position: relative;

  .home-image-list {
    width: 60rpx;
    height: 60rpx;
  }

  .home-image-share {
    width: 60rpx;
    height: 60rpx;
  }

  .home-image-set {
    width: 60rpx;
    height: 60rpx;
  }

  .home-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 100%;
  }
}
.popup-title{
	font-size: 40rpx;
	font-weight: 700;
	margin-top: 70rpx;
	margin-left: 50rpx;
}
.popup-history{
	display: flex;
	margin: 40rpx 80rpx 0 80rpx;
}
</style>
